<template>
  <div class="mv-container">
    <div class="innerbox">
      <div class="mv-wrap">
        <!-- mv -->
        <div class="title_box">
          <span class="iconfont icon-zuoyou" @click="toMovice"></span>
          <span class="mv">MV</span>
          <span class="mv_title">{{ mvInfo.name }}</span>
        </div>
        <div id="video_wrap">
          <video controls autoplay :src="mvUrl"></video>
          <!-- <video controls :src="mvUrl"></video> -->
          <!-- <video-player
            class="video-player vjs-custom-skin"
            ref="videoPlayer"
            :playsinline="true"
            :options="playerOptions"
          ></video-player> -->
        </div>
        <div class="btn_box">
          <div class="my_btn">
            <span class="iconfont icon-zan1"></span>
            <span>赞({{ mvInfo.likeCount }})</span>
          </div>
          <div class="my_btn">
            <span class="iconfont icon-shoucang"></span>
            <span>收藏({{ mvInfo.subCount }})</span>
          </div>
          <div class="my_btn">
            <span class="iconfont icon-fenxiang"></span>
            <span>分享({{ mvInfo.shareCount }})</span>
          </div>
          <div class="my_btn">
            <span class="iconfont icon-pinglun"></span>
            <span>评论({{ mvInfo.commentCount }})</span>
          </div>
        </div>
        <div>
          <div
            class="comment-wrap"
            v-if="hotComments !== undefined && hotComments.length !== 0"
          >
            <p class="title">
              精彩评论
              <span class="number">({{ hotComments.length }})</span>
            </p>
            <div class="comments-wrap">
              <!-- 评论 -->
              <div
                class="item"
                v-for="(item, index) in hotComments"
                :key="index"
              >
                <div class="icon-wrap">
                  <!-- 头像 -->
                  <img :src="item.user.avatarUrl + '?param=50y50'" alt />
                </div>
                <div class="content-wrap">
                  <div class="content">
                    <span class="name">{{ item.user.nickname }}</span>
                    <span class="comment">：{{ item.content }}</span>
                  </div>
                  <!-- 回复 -->
                  <div class="re-content" v-if="item.beReplied.length != 0">
                    <span class="name">{{
                      item.beReplied[0].user.nickname
                    }}</span>
                    <span class="comment"
                      >：{{ item.beReplied[0].content }}</span
                    >
                  </div>
                  <div class="date">{{ item.time | dateFormat }}</div>
                </div>
              </div>
            </div>
          </div>
          <!-- 最新评论 -->
          <div class="comment-wrap">
            <p class="title">
              最新评论
              <span class="number">({{ total }})</span>
            </p>
            <div class="comments-wrap">
              <!-- 评论 -->
              <div class="item" v-for="(item, index) in comments" :key="index">
                <div class="icon-wrap">
                  <!-- 头像 -->
                  <img :src="item.user.avatarUrl + '?param=50y50'" alt />
                </div>
                <div class="content-wrap">
                  <div class="content">
                    <span class="name">{{ item.user.nickname }}</span>
                    <span class="comment">：{{ item.content }}</span>
                  </div>
                  <!-- 回复 -->
                  <div class="re-content" v-if="item.beReplied.length !== 0">
                    <span class="name">{{
                      item.beReplied[0].user.nickname
                    }}</span>
                    <span class="comment"
                      >：{{ item.beReplied[0].content }}</span
                    >
                  </div>
                  <div class="date">{{ item.time | dateFormat }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- mv信息 -->
      </div>
      <div class="info_box">
        <div class="info-wrap">
          <div class="info_title">MV简介</div>
          <div class="date_box">
            <span class="date">发布：{{ mvInfo.publishTime }}</span>
            <span class="number"
              >播放：{{ mvInfo.playCount | playCount }}次</span
            >
          </div>
          <div class="desc">简介：{{ desc }}</div>
        </div>
        <div class="other">
          <h3>相关推荐</h3>
          <div class="items">
            <div
              class="item"
              @click="toMv(item.id)"
              v-for="(item, index) in mvs"
              :key="index"
            >
              <div class="img-wrap">
                <img :src="item.cover" alt />
                <div class="num-wrap">
                  <span class="iconfont icon-shipin"></span>
                  <span class="num">{{ item.playCount | playCount }}</span>
                </div>
              </div>
              <div class="info-wrap">
                <div class="name">{{ item.name }}</div>
                <div class="duration">{{ item.duration | formDate }}</div>
                <div class="singer">{{ item.artistName }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { GetSingleMv, GetMvDetail, MvAuthor } from "../../../../api/music"
import request from "../../../../api/request"
export default {
  name: "mv",
  data() {
    return {
      id: null,
      // 总条数
      total: 20,
      // 页码
      page: 1,
      // 页容量
      limit: 10,
      desc: "",
      mvUrl: "",
      mvInfo: {},
      songer: {},
      comments: [],
      hotComments: [],
      total: 0,
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
        autoplay: false, //如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: "zh-CN",
        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          // {
          //   type: "",
          //   src: "", //视频url地址
          // },
        ],
        // poster: "../../static/image/thumb_1_1380_460_20181009043014983386.jpg", //你的封面地址
        // width: document.documentElement.clientWidth,
        // notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true, //全屏按钮
        },
      },
      mvs: [],
    }
  },
  mounted() {},
  watch: {
    $route: function(newVal, oldVal) {
      this.id = this.$route.query.id
      console.log(this.id)
      this.getMv()
      this.getInfo()
      this.getOther()
      this.getComments()
    },
    mvUrl: function() {
      console.log("播放地址：" + this.mvUrl)
      this.playerOptions.sources[0] = {
        type: "",
        src: this.mvUrl,
      }
      this.playerOptions.autoplay = true
    },
  },
  created() {
    this.id = this.$route.query.id
    this.getMv()
    this.getInfo()
    this.getOther()
    this.getComments()
  },
  methods: {
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`)
    },
    async getMv() {
      const res = await GetSingleMv({
        id: this.id,
      })
      this.mvUrl = res.data.url
    },
    async getInfo() {
      const res = await GetMvDetail({
        mvid: this.id,
      })
      this.mvInfo = res.data
      console.log(this.mvInfo)
      this.desc = res.data.desc
      if (this.desc != "" && this.desc.length > 200) {
        this.desc = this.cutstr(this.desc, 200)
      } else if (this.desc == "") {
        this.desc = "暂无简介"
      }
      this.getSonger()
    },
    async getSonger() {
      const res = await MvAuthor({
        id: this.id,
      })
      this.songer = res.artist
    },
    async getOther() {
      let res = await request({
        url: "/simi/mv",
        method: "get",
        data: {
          mvid: this.id,
        },
      })
      this.mvs = res.mvs
    },
    // 获取评论
    async getComments() {
      let res = await request({
        url: "/comment/mv",
        data: {
          id: this.id,
        },
        method: "get",
      })
      this.comments = Object.freeze(res.comments)
      this.hotComments = Object.freeze(res.hotComments)
      this.total = Object.freeze(res.total)
    },
    toMv(id) {
      this.$router.push(`/home/mvInfo?id=${id}`)
    },
    toMovice() {
      this.$router.push("/home/index/video")
    },
    // 截取字符串
    cutstr(str, len) {
      var str_length = 0
      var str_len = 0
      var str_cut = new String()
      var str_len = str.length
      for (var i = 0; i < str_len; i++) {
        var a = str.charAt(i)
        str_length++
        if (escape(a).length > 4) {
          //中文字符的长度经编码之后大于4
          str_length++
        }
        str_cut = str_cut.concat(a)
        if (str_length >= len) {
          str_cut = str_cut.concat("...")
          return str_cut
        }
      }
      //如果给定字符串小于指定长度，则返回源字符串；
      if (str_length < len) {
        return str
      }
    },
  },
}
</script>
<style lang="scss" scoped>
@import "../../../../../static/scss/common.scss";
@import "./videoInfo.scss";
</style>
